<template>
  <div class="fileportion" v-show="isShowContent">
    <div style="display:flex;">
      <!-- <el-button @click="">更新</el-button> -->
      <el-button @click="exportToPDF" v-show="isShowOutline">导出大纲</el-button>
      <el-button @click="isShowOutline = !isShowOutline">{{ isShowOutline ? '预览大纲' : "返回" }}</el-button>
      <!-- <el-tooltip content="目前只支持上传docx文件和pdf文件" placement="top"> -->
      <el-tooltip content="目前只支持上传pdf文件" placement="top">
      <!-- :beforeUpload="beforeUpload"  -->
      <!-- :limit="1"  -->
      <el-upload 
      :multiple="true"
      :file-list="fileList" 
      show-file-list="false"
      :on-success="handleUploadSuccess" 
      :data="uploadData"
      :action='baseURL + `/exam/T_subject/uploadDocumen`'  
      accept="application/pdf"
      >
        <el-button style="margin-left:15px" size="big" type="warning">更新大纲</el-button>
      </el-upload>
    </el-tooltip>
      <!-- <span style="display: inline;">目前只支持上传docx文件和pdf文件</span> -->

    </div>
    <div class="outerBox" v-show="isShowOutline">
      <div class="sidebar">
        <el-aside>
          <el-menu :default-active="activeMenu" @select="handleMenuSelect"  class="sidebar-menu">
            <!-- <el-menu-item index="home_Page_Skip">首页</el-menu-item> -->
            <el-menu-item index="course_Introduction_Skip">一、课程介绍</el-menu-item>
            <el-menu-item index="objectives_Skip">二、课程目标</el-menu-item>
            <el-menu-item index="objectives_And_Requirements_Skip">三、对应关系</el-menu-item>
            <el-menu-item index="course_Content_Skip">四、课程内容</el-menu-item>
            <el-menu-item index="teaching_Arrangement_Skip">五、教学进度安排</el-menu-item>
            <el-menu-item index="teaching_Method_Skip">六、课程教学方法</el-menu-item>
            <el-menu-item index="evaluation_Mode_Skip">七、课程考核方式</el-menu-item>
            <el-menu-item index="grade_Evaluation_Skip">八、成绩评定方法</el-menu-item>
            <el-menu-item index="goal_Attainment_Skip">九、达成度评价</el-menu-item>
            <el-menu-item index="target_Weight_Skip">十、课程目标权重</el-menu-item>
            <el-menu-item index="improve_Skip">十一、持续改进</el-menu-item>
            <el-menu-item index="reference_Book_Skip">十二、教材和参考书</el-menu-item>
          </el-menu>
        </el-aside>
      </div>

      <div id="pdf-content" class="content-to-export" direction="vertical">
        <el-header class="headerTest">
          <h1 style="width: 100%;">计算机学院《数据结构》课程教学大纲</h1>
        </el-header>
        <el-card id="home_Page_Skip" class="box-card">
          <!-- <div class="card-header">
                        <span>首页</span>
                    </div> -->
          <h1 v-show="!isShowTop" style="text-align: center; margin-top: -10px;">教学大纲封面</h1>
          <div style="display: flex; justify-content: center;">
            <el-table  :show-header=false :data="headData" style="width: 80%;" center>
              <el-table-column prop="label" label="" align="center"></el-table-column>
              <el-table-column prop="value" label="" align="center"></el-table-column>
            </el-table>
          </div>
        </el-card>
        <el-card class="box-card">
          <div class="card-header" style="display: flex; justify-content: center;">
            <span style="font-size:20px;margin-bottom:10px; margin-top: -10px;">《数据结构》课程教学大纲</span>
          </div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="课程编码" label-align="center" align="center">
              {{ outlineFormData.code }}
            </el-descriptions-item>
            <el-descriptions-item label="课程性质" label-align="center" align="center">
              {{ outlineFormData.quality }}
            </el-descriptions-item>
            <el-descriptions-item label="课程名称" label-align="center" align="center" span="2">
              {{ outlineFormData.cName }}
            </el-descriptions-item>
            <el-descriptions-item label="英文名称" label-align="center" align="center" span="2">
              {{ outlineFormData.eName }}
            </el-descriptions-item>
            <el-descriptions-item label="所教班级" label-align="center" align="center" >
              {{ outlineFormData.classname }}
            </el-descriptions-item>
            <el-descriptions-item label="所教学院" label-align="center" align="center">
              {{ outlineFormData.teacher_unit }}
            </el-descriptions-item>
            <el-descriptions-item label="所教学年" label-align="center" align="center">
              {{ outlineFormData.teacher_grade }}
            </el-descriptions-item>
            <el-descriptions-item label="学识学分" label-align="center" align="center">
              {{ outlineFormData.creAndHours }}
            </el-descriptions-item>
            <el-descriptions-item label="其中实验/实践学识" label-align="center" align="center">
              {{ outlineFormData.praHours }}
            </el-descriptions-item>
            <el-descriptions-item label="开课单位" label-align="center" align="center">
              {{ outlineFormData.class_unit }}
            </el-descriptions-item>
            <el-descriptions-item label="适用专业" label-align="center" align="center">
              {{ outlineFormData.majors }}
            </el-descriptions-item>
            <el-descriptions-item label="先修课程" label-align="center" align="center" span="2">
              {{ outlineFormData.per_class }}
            </el-descriptions-item>
            <el-descriptions-item label="授课语言" label-align="center" align="center">
              {{ outlineFormData.language }}
            </el-descriptions-item>
            <el-descriptions-item label="课程网址" label-align="center" align="center" span="2">
              {{ outlineFormData.class_com }}
            </el-descriptions-item>
          </el-descriptions>
          <div id="course_Introduction_Skip" class="card-header">
            <span>一、课程介绍</span>
          </div>
          <div class="font_content" style="text-indent: 2em; font-size: 16px; color:">
            <span>{{ courseInfo }}</span>
            <!-- <span>《数据结构》是计算机类专业一门重要的专业基础课，它主要介绍和研究数据在计算机中的组织、
              存储和处理方法。通过本课程的学习，使得学生从数据逻辑结构、存储结构和基本运算算法设计三
              个层面掌握基本的数据组织和数据处理方法，能够从问题出发设计面向数据结构的求解算法，并能
              够对算法进行时间复杂度与空间复杂度分析，为后续课程如操作系统等课程学习打下基础。
            </span> -->
          </div>
          <div id="objectives_Skip" class="card-header">
            <span>二、课程目标</span>
          </div>
          <div class="font_content" style="text-indent: 2em; font-size: 16px; color:">
            <span>
              通过本课程的学习，使学生理解数据的逻辑结构和存储结构基本概念及其相关算法；具备基本的、
              良好的算法理论知识与设计技能，能用于编制高效可靠的程序；针对实际问题，能合理地选择相应
              的数据结构，设计有效的算法，并进行实现与分析。
            </span>
          </div>
          <!-- white-space: pre-line; -->
          <div class="font_content" style="text-indent: 2em; font-size: 16px;  color:"  v-for="course in courseAim" :key="course.id">
            <span> {{ course.target_name }}{{  course.target_content }}</span>
            <!-- <span> {{ course.target_name }}{{  course.target_content.replace(/\n(?!.*\n)/, '') }}</span> -->
            <!-- <span v-html="course.target_name + course.target_content.replace(/\n(?!.*\n)/, '')"></span> -->
            <!-- <span>
              课程目标1：知识教学目标 （支撑毕业要求指标点 1.2）
            </span>
            <br />
            <span>
              认识计算机应用中数据对象的特性，数据结构及其分类；具有各种数据的逻辑结构、
              存储结构、相应算法及其之间关系的相关知识。
            </span>
          </div>
          <div class="font_content" style="text-indent: 2em; font-size: 16px; color:">
            <span>
              课程目标2：基础能力培养目标 （支撑毕业要求指标点 2.1）
            </span>
            <br />
            <span>
              能应用数据结构的基础理论知识，具备各种数据结构及其算法的理论知识与设计技能，
              能设计各种基本数据结构和实现方法，并用于编制高效可靠的程序。
            </span>
          </div>
          <div class="font_content" style="text-indent: 2em; font-size: 16px; color:">
            <span>
              课程目标3：综合应用能力培养（支撑毕业要求指标点 3.3）
            </span>
            <br />
            <span>
              能针对实际应用问题进行分析，合理地选择相应的数据结构，并进行算法设计与实现。
            </span> -->
          </div>
          <div id="objectives_And_Requirements_Skip" class="card-header">
            <span>三、课程目标与毕业要求指标点的对应关系</span>
          </div>
          <el-table :data="getRelation" border style="width: 100%">
            <el-table-column label="课程目标" prop="class_target_name" align="center"></el-table-column>
            <el-table-column label="毕业要求指标" prop="index_point_name" align="center"></el-table-column>
            <el-table-column label="等级" prop="between" align="center"></el-table-column>
          </el-table>
          <div id="course_Content_Skip" class="card-header">
            <span>四、课程内容</span>
          </div>
          <el-table :data="courseData" :span-method="objectSpanMethod" border style="width: 100%">
            <el-table-column prop="unit_knowledge_name" label="知识单元" align="center" />
            <el-table-column prop="tec_content" label="教学内容" align="center" />
            <el-table-column prop="tec_request" label="教学要求" align="center" />
            <el-table-column prop="class_target_name" label="支撑课程目标" align="center" />
          </el-table>
          <div id="teaching_Arrangement_Skip" class="card-header">
            <span>五、课程教学进度安排</span>
          </div>
          <el-table :data="teachingSchedule" show-summary style="width: 100%">
            <el-table-column prop="unit_knowledge_name" label="名称" align="center" />
            <el-table-column prop="all_time" label="总学时" align="center" />
            <el-table-column label="学时分配" align="center">
              <el-table-column prop="theory_time" label="理论" align="center" />
              <el-table-column prop="practice_time" label="实验实践" align="center" />
            </el-table-column>
          </el-table>
          <div id="teaching_Method_Skip" class="card-header">
            <span>六、课程教学方法</span>
          </div>
          <!-- <ol>
            <li>阐述基本原理，理论联系实际，培养学生算法设计能力。</li>
            <li>采用多媒体课件、电子备课和传统教学相结合进行教学；采用讲授式、讨论式、案例式、启发式等教学手段。</li>
            <li>理论教学与相对应的实验课程相结合，强化学生解决实际问题能力的培养。</li>
          </ol> -->
          <div style="white-space: pre-line;">{{ methodContent }}</div>
          <div id="evaluation_Mode_Skip" class="card-header">
            <span>七、课程考核方式</span>
          </div>
          <div>
            <div>考核方式：{{ examMethodContent.assess_manner  }}</div>
            <div>考试方式：{{ examMethodContent.examination_manner  }}</div>
            <div>考试时间：{{ examMethodContent.examination_time  }}</div>
            <div>{{ examMethodContent.content  }}
            </div>
          </div>
          <div id="grade_Evaluation_Skip" class="card-header">
            <span>八、课程考核成绩评定方法</span>
          </div>
          <!-- <el-table :data="tableData" style="width: 100%">
                        <el-table-column label="一级考核指标">
                            <el-table-column prop="state" label="指标内容"  />
                            <el-table-column prop="city" label="分数比例"  />
                        </el-table-column>
                        <el-table-column label="二级考核指标">
                            <el-table-column prop="name" label="指标内容" />
                            <el-table-column prop="name" label="支撑毕业要求指标点及所占比例"/>
                        </el-table-column>
                    </el-table> -->
          <div class="table-container">
            <!-- 左侧表格 style="width: 50%; float: left;" -->
            <el-table :data="oneExamine" border>
              <el-table-column label="一级考核指标" align="center">
                <el-table-column prop="content" label="指标内容" align="center">
                  <!-- <template v-slot="scope">
                    <div class="centered-content" :style="{ height: '92px' }">{{
    gradeEvaluaationData[scope.$index].content }}</div>
                  </template> -->
                </el-table-column>
                <el-table-column prop="proportion" label="分数比例" align="center" />
              </el-table-column>
            </el-table>
          </div>
          <div class="table-container">
                      <!-- 右侧表格  style="width: 50%; float: left;"  :show-header=false -->
            <!-- <el-table :data="gradeEvaluaationData.slice(2, 10)" style="width: 50%; float: left;" border> -->
              <el-table :data="twoExamine" border>
              <el-table-column label="二级考核指标" align="center">
                <el-table-column prop="content" label="指标内容" align="center" />
                <el-table-column label="支撑毕业要求指标点及所占比例" align="center" >
                  <el-table-column prop="point_name" label="支撑毕业要求指标点" align="center"/>
                  <el-table-column prop="proportion" label="占比" align="center"/>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="marTOP"> -->
          <el-table :data="examineWeight" :span-method="objectSpanMethod1" border style="width: 100% ">
            <el-table-column prop="class_target_name" label="课程目标" align="center" />
            <el-table-column prop="suppore" label="支撑环节" align="center" />
            <el-table-column prop="weight" label="权重系数" align="center" />
          </el-table>
          <!-- </div> -->
          <div style="text-indent: 2em;margin-top:10px">
            <!-- 说明：作业1和2为线性表作业，含顺序存储与链式存储；作业3为树作业，作业4为图作业。
            试题集合X1建议为选择题，考核各章的基本知识，包括数据结构基本概念、各种数据结构
            及其运算、算法分析；试题集合X2建议为应用分析题，考核算法分析与应用，主要是树、图、
            查找和排序算法；试题集合X3建议为算法设计题，主要考核线性表、树和图的算法设计。 -->
            说明：{{ examineIllustrate }}
          </div>
          <div id="goal_Attainment_Skip" class="card-header">
            <span>九、课程目标达成度评价</span>
          </div>
          <div>
            <ol>
              <li>
                <p>课程目标达成度评价机制</p>
                <p>（1）评价机构</p>
                <p style="text-indent: 2em;">{{ evaluateContent1.agencies }}</p>
                <p>（2）数据来源</p>
                <p style="text-indent: 2em;">{{ evaluateContent1.data }}</p>
                <p>（3）评价周期</p>
                <p style="text-indent: 2em;">{{ evaluateContent1.cycle }}</p>
              </li>
              <li>
                <p>课程目标达成评价方法</p>
                <!-- <p>（1）各个课程目标权重值的确定</p>
                <p style="text-indent: 2em;">本课程有3个课程目标，每个课程目标对 12个毕业要求分解指标点的支撑情况是不相同的，
                  按照各个课程目标对12个毕业要求分解指标点的支撑力度，对每个课程目标赋予权重值。根据一门课程的所有课程目标都
                  应该对该课程的整体目标达成有所贡献的原则，该课程的整体目标达成度由该课程的所有课程目标达成度的加权平均值确定。
                </p>
                <p style="text-indent: 2em;">本课程有3个课程目标，每个课程目标对12个毕业要求的支撑力度有高（H）、中（M）、低（L）
                  之分，为了便于操作，赋值 H=3、M=2、L=1。假设某门课程有个课程目标，第个课程目标对12个毕业要求分解指标点的支撑力度
                  有个H、个M和个L，那么，第个课程目标的分值为，第个课程目标的权重值确定为： 所有课程目标的权重值之和 。
                </p>
                <p>（2）各个课程目标达成度的计算</p>
                <p style="text-indent: 2em;">各个课程目标达成度评价采用“考核成绩分析法”。每个课程目标都有支撑该课程目标的教学内
                  容，假设某门课程有个课程目标，支撑第个课程目标的教学内容试卷考核总分为，抽取的样本学生该部分的试卷考核平均分数
                  为，是该课程支撑第个课程目标的形成性考核的平均得分（形成性考核一般包括课堂表现、作业和平时测验等），支撑第个课
                  程目标的形成性考核总分为，是期末试卷考核占总考核的比例，那么第个课程目标的达成度计算公式为：
                  若某个，则期末考核试卷中无支撑该课程目标的内容，则。
                </p>
                <p>（3）课程的整体目标达成度评价标准</p>
                <p style="text-indent: 2em;">
                  参照《嘉应学院授予学士学位工作细则》，平均学分绩点2.0及以上者可获得理学学士学位。由于学分绩点2.0对应课程考核成绩为70分，同时，考虑到课程合格成绩为60分，因此，本专业课程的整体目标达成度评价标准设定为“达到
                  0.65
                  为评价合格”。</p> -->
                  <p style="white-space: pre-line;">{{ evaluateContent2.one }}</p>
                  <p style="white-space: pre-line;">{{ evaluateContent2.two }}</p>
                  <p style="white-space: pre-line;">{{ evaluateContent2.three }}</p>
              </li>
            </ol>
          </div>
          <div id="target_Weight_Skip" class="card-header">
            <span>十、本课程各个课程目标的权重</span>
          </div>
          <div>
            <p style="text-indent: 2em;">依据第八部分中的课程目标达成度评价方法，计算得到本课程的各个课程目标的权重如下：</p>
          </div>
          <el-table :data="everyWeightData" border style="width: 100%">
            <el-table-column prop="aim" label="课程目标" align="center" />
            <!-- <el-table-column prop="aim1" label="课程目标-1" align="center" />
            <el-table-column prop="aim2" label="课程目标-2" align="center" />
            <el-table-column prop="aim3" label="课程目标-3" align="center" /> -->
            <el-table-column v-for="(value,index) in weightData" :key="index" :label="value.class_target_name">
              <!-- weightData的prop数据都是weights，这样子才能把相同属性的值渲染上表格，只有一行的情况下 -->
              <template #default="scope">
                {{ value.weights }}
              </template>
            </el-table-column>
          </el-table>
          <div id="improve_Skip" class="card-header">
            <span>十一、持续改进</span>
          </div>
          <div>
            <p style="text-indent: 2em;">{{ improveData }}</p>
          </div>
          <div id="reference_Book_Skip" class="card-header">
            <span>十二、教材和参考书目</span>
          </div>
          <div>
            <ol>
              <li>
                <p>教材</p>
                <!-- <p>[1]数据结构教程（第6版），李春葆等，北京：清华大学出版社，2022.</p>
                <p>[2]数据结构教程（第6版）学习指导，李春葆等，北京：清华大学出版社，2022.</p>
                <p>[3]数据结构教程（第6版）上机实验指导，李春葆等，北京：清华大学出版社，2022.</p> -->
                <p style="white-space: pre-line;line-height:26px;font-size:16px;">{{ bookData.t_book }}</p>
              </li>
              <li>
                <p>参考书目</p>
                <!-- <p>[1] 数据结构，严蔚敏，北京：清华大学出版社，2018.</p>
                <p>[2] 罗文劼.数据结构与算法（第4版）[M]. 北京：机械工业出版社.2019.</p>
                <p>[3] 汪沁、奚李峰等.数据结构与算法（第2版）[M]. 北京：清华大学出版社.2018.</p> -->
                <p style="white-space: pre-line;line-height:26px;font-size:16px;">{{ bookData.refer_book }}</p>
              </li>
              <li>
                <p>附：课程作业（实验报告）评分依据</p>
                <!-- <p>95分：实验报告内容完整，测试全面，功能完善，增加比较多的除基本功能外的其它功能，改进明显。</p>
                <p>90分：实验报告内容完整，测试比较全面，功能比较完善，除基本功能外，有改进。</p>
                <p>85分：实验报告内容比较完整，完成基本功能，测试一般，功能一般，无改进。</p>
                <p>80分：实验报告内容比较完整，完成基本功能，测试一般，但无结果分析。</p>
                <p>75分：实验报告内容不完整，完成基本功能，但没附测试结果。</p>
                <p>70分：实验报告内容不完整，未完成基本功能，但程序能正常运行。</p>
                <p>70分及以下：实验报告内容不完整，程序不能正常运行，基本功能不全。</p> -->
                <p style="white-space: pre-line;line-height:26px;font-size:16px;">{{ bookData.basis }}</p>
              </li>
            </ol>
          </div>
        </el-card>
      </div>
    </div>
  </div>
  <!-- <div style="text-align: center;">
        <p style="font-size: 30px;">暂时没有教学大纲，请上传您的教学大纲！</p>
        <el-button style="font-size: 30px; width:400px ;height: 100px; margin-top: 10px;" type="warning">上传文件</el-button>
        <div style="text-align: right; font-size: smaller;">
            <p  style="display: inline;">目前只支持上传docx文件和pdf文件</p>
        </div>
    </div> -->
  <div class="fileportion" v-show="!isShowContent" style="margin-top:20vh; justify-content:center; align-items:center; text-align: center;">
    <!-- <p style="font-size: 30px;">暂时没有教学大纲，请上传您的教学大纲！</p> -->
    <p style="font-size: 30px;">{{subInfo.subject}}课程-{{ subInfo.grade_name }}-{{subInfo.class_name}}班没有教学大纲，请上传教学大纲！</p>
    <!-- :beforeUpload="beforeUpload"  -->
    <el-upload 
      :multiple="true"
      :file-list="fileList" 
      show-file-list="false"
      :on-success="handleUploadSuccess" 
      :data="uploadData"
      :action='baseURL + `/exam/T_subject/uploadDocumen`'  
      accept="application/pdf"
      >
      <!-- accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf" -->
      <el-button size="big" type="warning">点击上传</el-button>
    </el-upload>
    <!-- <span style="display: inline;">目前只支持上传docx文件和pdf文件</span> -->
    <span style="display: inline;">目前只支持上传pdf文件</span>
  <!-- <iframe id="pdfViewer" width="100%" height="600px"></iframe> -->
  </div>
  <div class="fileportion">
    <!-- <el-button size="big" type="warning" @click="isShowOutline = !isShowOutline">返回编辑</el-button> -->
    <vue-office-docx :src="src" v-if="!isShowOutline" /> <!-- 根据 hasData 的值来决定是否显示 VueOfficeDocx 组件 -->
    <!-- <vue-office-excel :src="src" v-if="hasData"/> -->
    <vue-office-pdf :src="src" v-if="!isShowOutline" style="background:while;" />
    <iframe v-show="!isShowOutline" id="pdfViewer" width="100%" height="800px"></iframe>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, reactive } from 'vue';
import { useClassStore } from '@/stores/index.js'
import { everyWeightData, gradeEvaluaationData, objectWeightData, courseContentData, evaluationConfirmationData, summaryImprovementData, courseAchievementData, examPerformanceData, classPerformanceData, homeworkPerformanceData, courseBasicInfo, quantitativeAnalysisData, spanMethod } from './dataSET'
import { getBeginData,uploadSyllabusFile,getCourseDes,getCourseIntroduce,getCourseAim,getCourseName,getIndexPoint,getNameAndPoint,getKnowledgeContent,getKnowledgeTarget,getCourseSchedule,getCourseMethods,getExamineMethod,getWeightSupport,getWeightIllustrate,getExamineTarget,getExamineTargetTow,getExamineTargetChart,getEvaluationMechanism,getEvaluationWay,getTargetWeight,getContinuousImprovement,getBookAndBibliography } from '@/api/syllabus.js'
import { getSyllabusData,getSyllabusPath } from '@/api/course.js'
import { baseURL } from '@/utils/request';
import { ElMessage, ElMessageBox } from 'element-plus'
import html2pdf from 'html2pdf.js'
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'
// import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/docx/lib/index.css'
// import '@vue-office/excel/lib/index.css'

// 激活的菜单项，默认为第一个
const activeMenu = ref('home_Page_Skip');
// const syllabusId = ref()//大纲id
const subInfo = reactive({
  syllabusId:0,
  subId:0,//可以根据路由拿到
  class_name:'',
  grade_name:'',
  subject:'',
})
//一进入页面，则把该班级的大纲id给页面
const classMessage = useClassStore()
// syllabusId.value = classMessage.classInfo.id
subInfo.syllabusId = classMessage.classInfo.user_and_acs_id//大纲id
subInfo.class_name = classMessage.classInfo.class_name
subInfo.grade_name = classMessage.classInfo.grade_name
subInfo.subject = classMessage.classInfo.subject

//判断是否展示pdf内容
const isShowContent = ref(false)///////////////////////////////////////////
//是否展示大纲，预览大纲
const isShowOutline = ref(true)

const src = ref('');
const fileList = ref([]);
const hasData = ref(false); // 添加一个布尔值用于表示是否有数据

//获取大纲路径
const getFilePath = async () =>{
  // console.log('高发的顺丰',subInfo.syllabusId);
  const res = await getSyllabusPath(subInfo.syllabusId)
  //如果大纲有路径则把路径发送过去过去文件信息
  if(res.data.code === 500){
    ElMessage({
            type: 'error',
            message: `${res.data.msg}，请上传教学大纲！`,
        });
    }else if(res.data.data.Path){
    const respath = await getSyllabusData(res.data.data.Path)
    // 将二进制数据转换为 Blob 对象
    const blob = new Blob([respath.data], { type: 'application/pdf' });

    // 创建一个指向 Blob 对象的 URL
    const pdfUrl = URL.createObjectURL(blob);

    // 将 URL 赋值给 iframe 的 src 属性
    document.getElementById('pdfViewer').src = pdfUrl;
    if(res.status === 200){
      syllabusAllPort()
      isShowContent.value = true;
    }
  }
}


// 存储数据到 localStorage 中
const beforeUpload = (file) => {
  let reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = (loadEvent) => {
    let arrayBuffer = loadEvent.target.result;
    src.value = arrayBuffer;

    // 将 ArrayBuffer 转换为 Uint8Array
    let uint8Array = new Uint8Array(arrayBuffer);
    // 将 Uint8Array 转换为 Base64 字符串
    let base64String = btoa(String.fromCharCode.apply(null, uint8Array));
    //存在本地内存
    localStorage.setItem('outline', base64String);
    // hasData.value = true; // 数据加载后设置 hasData 为 true，表示有数据
    isShowContent.value = true; // 数据加载后设置 hasData 为 true，表示有数据
  };
  //true允许上传
  return true;
};

//大纲id用于上传文件时和文件一起发送过去给后端
const uploadData = {
  // id:subInfo.syllabusId
  // t_user_and_a_c_s_id:1,
  t_user_and_a_c_s_id:subInfo.syllabusId,
}

//监听上传成功事件
const handleUploadSuccess = async (response, file, fileList) =>{
  // console.log('3333',response, file, fileList);
//如果大纲成功上传了文件，则获取页面数据
  // getHeadData()//获取头部封面信息
  // pdfUrl.value = response.data.path
  const res = await getSyllabusData(response.data.path)
  // 将二进制数据转换为 Blob 对象
  const blob = new Blob([res.data], { type: 'application/pdf' });

  // 创建一个指向 Blob 对象的 URL
  const pdfUrl = URL.createObjectURL(blob);

  // 将 URL 赋值给 iframe 的 src 属性
  document.getElementById('pdfViewer').src = pdfUrl;
  if(res.status === 200){
    ElMessage({
            type: 'success',
            message: '文件上传成功！',
        });
    syllabusAllPort()
    isShowContent.value = true;
  }
}

// 检查本地存储中是否有数据
const checkLocalData = () => {
  const storedData = localStorage.getItem('outline');
  if (storedData) {
    // 将 Base64 字符串转换为 ArrayBuffer
    let decodedString = atob(storedData);
    let buffer = new ArrayBuffer(decodedString.length);
    let uint8Array = new Uint8Array(buffer);
    for (let i = 0; i < decodedString.length; i++) {
      uint8Array[i] = decodedString.charCodeAt(i);
    }
    src.value = buffer;
    isShowContent.value = true;
  }
};

// 定义预览PDF的方法
const previewPDF = () => {
  // 获取要转换为PDF的元素
  const element = document.getElementById('pdf-content');
  // 设置PDF转换选项
  const opt = {
    margin: 1, // 设置PDF边距为1英寸
    filename: 'document.pdf', // 设置生成的PDF文件名为document.pdf
    image: { type: 'jpeg', quality: 0.98 }, // 设置图片类型为jpeg，并指定质量为0.98
    html2canvas: { scale: 2 }, // 设置html2canvas的缩放比例为2
    jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } // 设置jsPDF的单位为英寸，格式为letter，方向为纵向
  };
  // 调用html2pdf库的方法进行PDF转换，并在新窗口中预览
  html2pdf().from(element).set(opt).outputPdf('dataurlnewwindow');
};

// const exportToPDF = () => {
//     const element = document.querySelector('.content-to-export'); // Select the element containing the content to export
//     const options = {
//         margin: [10, 5, 10, 5], // 上右下左的边距
//         filename: 'exported-file.pdf',
//         image: { type: 'jpeg', quality: 0.98 },
//         html2canvas: { scale: 2, logging: true, dpi: 192, letterRendering: true, pagebreak: { mode: ['avoid-all', 'css', 'legacy'] } },
//         // jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
//         jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }

//     };

//     // Use html2pdf() to apply the options and then save the PDF
//     html2pdf().from(element).set(options).save();
// }

// const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
//   if (columnIndex === 0) {
//     const currentChapter = row.chapter;
//     let rowspan = 1;
//     // 从当前行往下搜索，找到相同章节的行数
//     for (let i = rowIndex + 1; i < courseContentData.length; i++) {
//       if (courseContentData[i].chapter === currentChapter) {
//         rowspan++;
//       } else {
//             return {
//             rowspan: 0,
//             colspan: 0,
//             };
//         break;
//       }
//     }
//     return {
//       rowspan: rowspan,
//       colspan: 1,
//     };
//   }
// if(courseContentData.length > 0){
//     let i = 0
//     const json = {}
//     courseContentData,forEach((item,index) =>{
//         if(index && item.chapter === courseContentData[index - 1].chapter){
//             json[i] += 1
//         }else{
//             i = index
//             jsoon[i] = 1
//         }
//     })

// }
// };

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (columnIndex === 0) {
    if (rowIndex % 5 === 0) {
      return {
        rowspan: 5,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}
const objectSpanMethod1 = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (columnIndex === 0) {
    if (rowIndex % 3 === 0) {
      return {
        rowspan: 3,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}
const objectSpanMethod2 = ({
  row,//当前行
  column,////当前列
  rowIndex,//当前行号
  columnIndex,//当前列号
}) => {
  if (columnIndex === 0) {
    if (rowIndex === 2) {
      return {
        rowspan: 3,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

const isShowTop = ref(false)

const syllabusAllPort = () =>{
//获取开头封面的数据
getHeadData()
//获取课程描述
getOCourseInfo()
//课程介绍
getCourseTarget()
//课程目标与毕业要求指标点的对应关系
getTargetAndRequest()
//4课程内容查询
getAimContent()
////课程教学进度查询
getPlan()
//获取教学方法
getTeachingMethod()
//7考核方式
getExamMethod()
//8课程考核成绩评定方法  考核评定
getExamineAssess()
//9课程目标达成度评价
getFinishEvaluate()
// 10本课程各个课程目标的权重
getAimweight()
//11持续改进
getImproveData()
//12十二、教材和参考书目
getBookData()

}

//封面数据
const headData = ref([
  { label: '课程编码', value: '空' },
  { label: '适用专业', value: '软件工程、网络工程、物联网工程、计算机科学与技术' },
  { label: '课程负责人', value: '钟秀玉 ' },
  { label: '审核人', value: '空' },
  { label: '编制单位', value: '计算机学院软件工程系' },
  { label: '编制时间', value: '2023.2' }
  // { label: '课程编码', value: '' },
  // { label: '适用专业', value: '' },
  // { label: '课程负责人', value: '' },
  // { label: '审核人', value: '' },
  // { label: '编制单位', value: '' },
  // { label: '编制时间', value: '' }
])

//获取开头封面的数据
const getHeadData = async () =>{
  const res = await getBeginData(1)
  const resData = res.data.data[0]
  headData.value[0].value = resData.code
  headData.value[1].value = resData.majors
  headData.value[2].value = resData.Leader
  headData.value[3].value = resData.Reviewers
  headData.value[4].value = resData.unit
  headData.value[5].value = resData.mack_time

}

//获取课程描述
const outlineFormData = reactive({})
const getOCourseInfo = async () =>{
  const res = await getCourseDes(1)
  const resData = res.data.data[0]
  //将获取到的数据渲染到页面上
  outlineFormData.code = resData.code;
  outlineFormData.quality = resData.quality;
  outlineFormData.cName = resData.cName;
  outlineFormData.eName = resData.eName;
  outlineFormData.creAndHours = resData.creAndHours;
  outlineFormData.praHours = resData.praHours;
  outlineFormData.class_unit = resData.class_unit;
  outlineFormData.majors = resData.majors;
  outlineFormData.per_class = resData.per_class;
  outlineFormData.class_com = resData.class_com;
  outlineFormData.language = resData.language;
  outlineFormData.teacher_unit = resData.teacher_unit;
  outlineFormData.teacher_grade = resData.teacher_grade;
  outlineFormData.classname = resData.classname;

}

//课程介绍
const courseInfo = ref()
const getIntroduceInfo = async () =>{
  const res = await getCourseIntroduce(1)
  const resData = res.data.data[0]
  courseInfo.value = resData.content
}
getIntroduceInfo()

//课程目标
const courseAim = reactive([])
const getCourseTarget = async () =>{
  const res = await getCourseAim(1)
  const resData = res.data.data
  resData.forEach(index => {
    courseAim.push(index)
  })
}

let evaluationMatrix = reactive([{
  criteria:'',
  tar1:'',
  tar2:'',
  tar3:'',
}])

let pointArr = reactive([{
  label:'',
  prop:''
}])
//课程目标与毕业要求指标点的对应关系
const getRelation = reactive([])
const getTargetAndRequest = async () =>{
  //   //课程目标名称查询
  //  const resName = await getCourseName(1)
  //  //动态定义列长度和值
  //  evaluationMatrix = Array.from({ length: resName.data.data.length }, (value,index) => ({
  //       criteria: '',
  //       [`tar${index+1}`]: '',
  //       // tar2: '',
  //       // tar3: ''
  //   }));
  //  resName.data.data.forEach((value,index)=>{
  //   evaluationMatrix[index].criteria = value
  //   // evaluationMatrix[index].`tar${index+1}` = ''
  //   console.log(index,value,'index');
  //  })
  //  console.log('evaluationMatrix',evaluationMatrix);
  //  //获取指标点
  //  const resPoint = await getIndexPoint(1)
  //  //动态定义行长度和值
  //  pointArr = Array.from({length:resPoint.data.data.length},(value,index) =>({
  //   label:'',
  //   prop:`tar${index+1}`
  //  }))
  //  resPoint.data.data.forEach((value,index) =>{
  //   pointArr[index].label = value
  //  })
  //  console.log('pointArr',pointArr);
   //两者的关系查询
   const resRelation = await getNameAndPoint(1)
   resRelation.data.data.forEach((value,index) =>{
    getRelation.push(value)
   })
  //  console.log('resRelation',resRelation);

}

//4课程内容查询
const courseData = reactive([
  // {
  //   class_target_id:0,
  //   class_target_name:'',
  //   unit_knowledge_id:0,
  //   unit_knowledge_name:'',
  //   tec_content:'',
  //   tec_request:''
  // }
])
const getCourseContent = async () =>{
  // 单元知识点对应的课程内容查询
  const res = await getKnowledgeContent(1)
  res.data.data.forEach((value,index) =>{
    courseData.push(value)
    // courseData[index].class_target_id = value.class_target_id
    // courseData[index].class_target_name = value.class_target_name
    // courseData[index].unit_knowledge_id = value.unit_knowledge_id
    // courseData[index].unit_knowledge_name = value.unit_knowledge_name
    // courseData[index].tec_content = value.tec_content
    // courseData[index].tec_request = value.tec_request

  })
}
const getAimContent = async () => {
  await getCourseContent(); // 等待getCourseContent执行完成
  // 单元知识点对应的课程目标查询
  // console.log('courseData',courseData);
  const resAim = await getKnowledgeTarget(1);
  // resAim.data.data.forEach((value, index) => {
  // console.log('courseDataTTTT',index,courseData[index].unit_knowledge_id);
  //   // console.log(value, index, 'wwwww');
  //   if (value.unit_knowledge_id === courseData[index].unit_knowledge_id) {
  //     if (courseData[index].class_target_name) {
  //       courseData[index].class_target_name += value.class_target_name;
  //     } else {
  //       courseData[index].class_target_name = value.class_target_name;
  //     }
  //   } 
  //   // else {
  //   //   console.log('eee');
  //   //   console.log(value.unit_knowledge_id, courseData[index].unit_knowledge_id, '22222222222222222');
  //   // }
  // });
  // console.log('resAim00000', courseData);
  for(let i = 0;i < courseData.length;i++){
    for(let j = 0 ;j < resAim.data.data.length;j++){
      if (resAim.data.data[j].unit_knowledge_id === courseData[i].unit_knowledge_id) {
        if (courseData[i].class_target_name) {
          courseData[i].class_target_name += '、'
          courseData[i].class_target_name += resAim.data.data[j].class_target_name;
        } else {
          courseData[i].class_target_name = resAim.data.data[j].class_target_name;
        }
      } 
    }
  }
};

////课程教学进度查询
const teachingSchedule = reactive([])
const getPlan = async () =>{
  const res = await getCourseSchedule(1)
  res.data.data.forEach(value =>{
    teachingSchedule.push(value)
  })
}

//获取教学方法
const methodContent = ref()
const getTeachingMethod = async () =>{
  const res = await getCourseMethods(1)
  methodContent.value = res.data.data[0].content
}

//7考核方式
const examMethodContent = reactive({})
const getExamMethod = async () =>{
  const res = await getExamineMethod(1)
  examMethodContent.assess_manner = res.data.data[0].assess_manner
  examMethodContent.examination_manner = res.data.data[0].examination_manner
  examMethodContent.examination_time = res.data.data[0].examination_time
  examMethodContent.content = res.data.data[0].content
}

//8课程考核成绩评定方法  考核评定
//考核权重
const examineWeight = reactive([])
//考核说明
const examineIllustrate = ref([])
//一级考核
const oneExamine = reactive([])
//二级考核
const twoExamine = reactive([])
const getExamineAssess = async () =>{
  //课程目标支撑环节权重系数查询
  const resWeight = await getWeightSupport(1)
  resWeight.data.data.forEach((value,index) =>{
    examineWeight.push(value)
  })
  //获取考核说明
  const resIllustrate = await getWeightIllustrate(1)
  examineIllustrate.value = resIllustrate.data.data[0].content
  //一级考核
  const resOne = await getExamineTarget(1)
  resOne.data.data.forEach(( value,index) =>{
    oneExamine.push(value)
  })
  // 二级考核
  const resTwo = await getExamineTargetTow(1)
  // resTwo.data.data.forEach((value,index) =>{
  //   twoExamine.push(value)
  // })
  //考核目标表
  const resBiao = await getExamineTargetChart(1)
  for(let i = 0;i < resTwo.data.data.length;i++){
    for(let j = 0; j < resBiao.data.data.length;j++){
      if(resTwo.data.data[i].Level_1_assessment_id === resBiao.data.data[j].Level_1_assessment_id){
        twoExamine.push({
          Level_1_assessment_id:resTwo.data.data[i].Level_1_assessment_id,
          Level_1_assessment_content:resTwo.data.data[i].Level_1_assessment_content,
          content:resTwo.data.data[i].content,
          point_name:resBiao.data.data[j].point_name,
          index_Point_id:resBiao.data.data[j].index_Point_id,
          proportion:resBiao.data.data[j].content

        })
      }
    }
  }
}

//9课程目标达成度评价
const evaluateContent1 = reactive({})
let evaluateContent2 = reactive({})
const getFinishEvaluate = async () =>{
  const resData1 = await getEvaluationMechanism(1)
  evaluateContent1.agencies = resData1.data.data[0].agencies
  evaluateContent1.cycle = resData1.data.data[0].cycle
  evaluateContent1.data = resData1.data.data[0].data
  const resData2 = await getEvaluationWay(1)
  evaluateContent2.one = resData2.data.data[0].one
  evaluateContent2.two = resData2.data.data[0].two
  evaluateContent2.three = resData2.data.data[0].three
  // console.log(evaluateContent2.one);
}

// 10本课程各个课程目标的权重
const weightData = reactive([])
const getAimweight = async () =>{
  const res = await getTargetWeight(1)
  res.data.data.forEach((value,index) =>{
    weightData.push(value)
  })
}

//11持续改进
const improveData = ref()
const getImproveData = async () =>{
  const res = await getContinuousImprovement(1)
  improveData.value = res.data.data[0].content
}

//12十二、教材和参考书目
const bookData = reactive({})
const getBookData = async () =>{
  const res = await getBookAndBibliography(1)
  // bookData.push(res.data.data[0])
  bookData.t_book=res.data.data[0].t_book
  bookData.refer_book=res.data.data[0].refer_book
  bookData.basis=res.data.data[0].basis
}
//导出大纲
const exportToPDF = () => {
  isShowTop.value = !isShowTop.value
  const element = document.querySelector('.content-to-export');
  const options = {
    margin: [10, 16, 10, 0],
    filename: 'exported-file.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 3, pagebreak: { mode: 'avoid-all', before: '.avoid-page-break', after: '.avoid-page-break' } },
    jsPDF: { unit: 'mm', format: 'a3', orientation: 'portrait' }
  };

  const pdfPromise = html2pdf().from(element).set(options).save();
  pdfPromise.then(() => {
    // PDF 导出完成后执行的操作
    isShowTop.value = !isShowTop.value
  })
}

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return { backgroundColor: '#fdf6ec' };
  } else {
    return { backgroundColor: '#f0f9eb' };
  }
}
// 处理菜单项选择事件
const handleMenuSelect = (index) => {
  // 更新激活的菜单项
  activeMenu.value = index;
  // 滚动到相应的内容区域
  scrollToSection(index);
};

// 滚动到指定的内容区域
const scrollToSection = (sectionId) => {
  const section = document.getElementById(sectionId);
  const container = document.querySelector('.content-to-export');
  if (section && container) {
    // 计算目标元素的顶部相对于容器顶部的位置
    let sectionTop = section.offsetTop;

    // 循环遍历，累加所有父元素的offsetTop值，直到达到container
    let parent = section.offsetParent;
    while (parent !== container && parent !== null) {
      sectionTop += parent.offsetTop;
      parent = parent.offsetParent;
    }

    // 使用容器的 scrollTo 方法实现平滑滚动
    container.scrollTo({
      top: sectionTop - container.offsetTop,
      behavior: 'smooth'
    });
  }
};

const updateSidebarHighlight = () => {
  const container = document.querySelector('.content-to-export');
  const sections = document.querySelectorAll('.content-to-export > .box-card');
  let currentActive = null;
  let minDistance = Infinity;
  sections.forEach(section => {
    const rect = section.getBoundingClientRect();
    const containerRect = container.getBoundingClientRect();
    const topDistance = Math.abs(rect.top - containerRect.top);

    // 查找与容器顶部距离最近的章节
    if (topDistance < minDistance) {
      minDistance = topDistance;
      currentActive = section.id;
    }
  });
  if (currentActive) {
    activeMenu.value = currentActive;
  }
};

// 组件挂载后添加滚动监听器
onMounted(() => {
  //进入页面时判断一下是否有大纲路径
  getFilePath()

  const container = document.querySelector('.content-to-export');
  container.addEventListener('scroll', updateSidebarHighlight);

  //进页面时判断有没有上传教学大纲
  checkLocalData()
});
</script>

<style scoped lang="scss">
$active-gradient: linear-gradient(to right, #d0bfdd, #d9e8fc); // 激活状态的渐变色
$inactive-gradient: linear-gradient(to right, #f4ece8, #898485); // 非激活状态的渐变色
$underline-height: 2px; // 下划线的高度
$underline-offset: 10px; // 下划线与文字的间距

// 定义一个mixin用于渐变背景
@mixin gradient-bg($startColor, $endColor) {
  background: $startColor; // 老的浏览器兼容
  background: linear-gradient(to right, $startColor, $endColor);
}

$inactive-gradient-start: #beb6d1; // 非激活状态的开始颜色
$inactive-gradient-end: #c8bada; // 非激活状态的结束颜色
$active-gradient-start: #b397c1; // 激活状态的开始颜色
$active-gradient-end: #c5a5d2; // 激活状态的结束颜色

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.outerBox {
  // width:100%;
  display: flex;
  border: 1px solid rgb(208, 199, 201);
  border-radius: 10px;
  box-shadow: 1px -8px 11px 1px rgba(0, 0, 0, 0.1);
  background-color: #e2e2f0;

  // .el-table {
  //         .el-table__row {
  //             &:nth-child(odd) {
  //                 background-color: #e91515 !important; // 使用!important来提高优先级
  //             }

  //             &:nth-child(even) {
  //                 background-color: #21adf3 !important; // 使用!important来提高优先级
  //             }
  //         }
  //     }
  .sidebar {
    /* 隐藏横向滚动条 */
    width: 15%;
    // border: none; /* 去除边框 */
    background: linear-gradient(to bottom right, #d6d6ee, rgb(201 104 30 / 0%));
    backdrop-filter: blur(5px);
    // height:100vh;
    // width: 270px;
    .sidebar-menu {
    // width: 20%;
    // height:100vh;
      box-sizing: border-box;
      // padding: 30px;
      // padding-left: 10px;
      width: 100%;
      margin: 0px 0 0 -11px;
      border-radius: 10px;
      // overflow-x: hidden;
      background-color: transparent;
      overflow:hidden;
      margin:0 auto;

      // 应用渐变背景
      // @include gradient-bg(#f4ece8, #898485);
      // border: 5px solid rgb(208, 199, 201);
      .el-menu-item {
        color: #496773;
        font-size: 0.7rem;
        // position: relative; // 为伪元素定位做准备
        margin-bottom: $underline-offset; // 为下划线留出空间
        height:40px;
        &:not(.is-active)::after {
          content: '';
          position: absolute;
          bottom: -$underline-height;
          left: 0;
          right: 0;
          height: $underline-height;
          background: linear-gradient(to right, $inactive-gradient-end, transparent); // 从粗到细的渐变效果
          border-radius: 1px;
        }

        // &.is-active::after {
        //   content: '';
        //   position: absolute;
        //   bottom: -$underline-height;
        //   left: 0;
        //   right: 0;
        //   height: $underline-height + 1px;
        //   background: linear-gradient(to right, $active-gradient-end, transparent); // 激活状态也应用渐变
        //   border-radius: 1px;
        // }

        &:hover {
          background-color: #d9e8fc9c; // 鼠标悬停时的背景色

          &::after {
            background: linear-gradient(to right, $active-gradient-end, transparent); // 保持渐变效果
          }
        }
      }
    }
  }

  .content-to-export {
    // border: 3px solid pink;
    overflow-y: auto;

    /* 允许垂直方向上的滚动 */
    height: 100vh;
    /* 或者根据您的布局需求设定固定高度 */
    flex: 1;

    margin-left: 10px;
    // margin: 10px;
    &::-webkit-scrollbar {
      width: 10px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #cbb1ce87;
      /* 设置滚动条滑块颜色 */
      border-radius: 10px;
      /* 设置滚动条滑块圆角 */
    }

    // background-color: #e4a2a2;
    // margin-left: 150px;
    .headerTest {
      // width: 1022px;
      // width: 80%;
      background-color: #ddd4e6;
      color: #64748b;
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-size: 24px;
      font-family: Arial, sans-serif;
      border-radius: 5px;
      // border-left: 5px solid #60a5fa;
      border-top: none;
      border-right: none;
      border-bottom: none;
      margin-bottom: 10px;
      margin-right: 10px;
    }

    .box-card {
      box-sizing: border-box;

      width: 100%;
      margin-left: -10px;
      // width: 80%;
      margin-bottom: 8px;
      padding: 10px;

      .card-header {
        // border-bottom: 2px dashed #ccc;
        margin-bottom: 14px;
        padding-bottom: 10px;
        span {
          margin-top: 20px;
          font-weight: bold;
          font-size: 16px;
        }
      }

      .statementBox {
        // color: rgb(235, 200, 200);
        letter-spacing: 2px;
        padding: 10px;
      }

      .descBox {
        color: #ccc;
        font-size: 12px;
        padding: 10px 0px;
      }

      .supportLink {
        padding: 10px;
        font-size: 14px;
      }
    }
  }
}

.diagonal-split-header {
  position: relative;
  height: 60px;
}

.text-part {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagonal-line {
  position: absolute;
  width: 200%;
  top: -48px;
  left: 9px;
  height: 100px;
  background: transparent;
  transform: rotate(-152deg);
  border-top: 1px solid #807878;
}

// 页面第一部分
.table-container {
  text-align: center;
  /* 水平居中 */
}

.table-container>div {
  margin-bottom: 10px;
  /* 添加间距 */
}

.table-container p {
  display: inline;
  /* 文字和 p 标签在同一行显示 */
  text-decoration: underline;
  /* 给文字添加下划线 */
}

.table-container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  //   height: 40vh; /* 可以根据实际需要设置高度 */
  margin-bottom: 10px
}

// .font_content{
//     span{
//         // font-weight: bold;
//         font-size: 16px;
//     }
// }
.centered-content {
  display: flex;
  align-items: center;
  /* 使用 Flexbox 实现垂直居中 */
  justify-content: center;
  /* 水平居中 */
}

.marTOP {
  margin-top: 100px;
}

// .fileportion{
//     text-align: center;
// }
//顶部按钮
.fileportion button {
  // text-align: center;
  // width: 100px;
  padding: 1.3em 3em;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #d4aaf9;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  margin-bottom: 10px;
}

.fileportion button:hover {
  background-color: #23c483;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

.fileportion button:active {
  transform: translateY(-1px);
}

.fileportion span {

  margin-left: 5px;
  margin-top: 15px;
  // text-align: right; 
  // font-size: smaller;
  font-size: 12px;
}

:deep().el-aside{
  width:100%;
}
:deep().sidebar{
  width:100%;
}
:deep().sidebar-menu{
  width:100%;
  border:0px
}
:deep().el-menu-item{
  width:100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号以指示被截断的文本 */
}
</style>
